<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style type="text/css">
			.grid {
				margin: auto;
				width: 500px;
				text-align: center;
			}
			.grid table {
				border-top: 1px solid #c2d89a;
				width: 100%;
				border-collapse: collapse;
			}
			.grid th,
			td {
				padding: 10;
				border: 1px dashed orange;
				height: 35px;
				line-height: 35px;
			}
			.grid th {
				background-color: orange;
			}
			.grid .book {
				padding-bottom: 10px;
				padding-top: 5px;
				background-color: #f3dcab;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="grid">
				<div>
					<h1>图书管理</h1>
					<div class="book">
						<div>
							<label for="id">
								编号：
							</label>
							<input type="text" id="id" v-model="id" />
							<label for="name">
								名称：
							</label>
							<input type="text" id="name" v-model="name" />
							<button @click="addBook">提交</button>
						</div>
					</div>
				</div>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in books" :key="item.id">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td>
								<a href="" @click.prevent>修改</a>
								<span>|</span>
								<a href="" @click.prevent>删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					id: '', // 图书编号
					name: '', // 图书名称
					books: [
						{
							id: 1,
							name: '三国演义',
							date: '',
						},
						{
							id: 2,
							name: '水浒传',
							date: '',
						},
						{
							id: 3,
							name: '红楼梦',
							date: '',
						},
						{
							id: 4,
							name: '西游记',
							date: '',
						},
					],
				},
				methods: {
					// 添加及编辑图书功能
					addBook() {
						// 添加图书
						let book = {
							id: this.id,
							name: this.name,
							date: '',
						}
						// 把新书加入图书列表
						this.books.push(book)

						// 重置输入框 (清空输入框)
						this.id = this.name = ''
					},
				},
			})
		</script>
	</body>
</html>
